<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>幻灯片</title>
	<style>
        #box {
        	width: 500px;
        	height: 300px;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        ul{
        	width: 2000px;
        	position: absolute;
        	left: 0;
        	top: 0;
        }
        ul,li{
        	padding: 0;
        	margin: 0;
        	list-style:none;
        }
        li{
        	float: left;
        }
        p{
        	margin: 0;
        	width: 160px;
        	position: absolute;
        	left: 200px;
        	bottom:10px;
        	/*background-color:red; */
        	/*margin: 0 auto;*/
        }
        p span {
        	cursor: pointer;
        	padding: 4px 8px;
        	background:red;
        	border-radius: 50%;
        }
        .cur{
        	background: gold;
        	color: white;
        }
	</style>
	<script>
		window.onload = function () {
			var oul = document.getElementsByTagName('ul');
			var oli = document.getElementsByTagName('li');
			var num = 0;
			var  fun = null;
			var ospan = document.getElementsByTagName('span')
      
			 function show() {
				 fun = setInterval(function () {
			for(j=0;j<ospan.length;j++){
             ospan[j].className = "";
          	      }
			if (num==oli.length-1) {
                num = 0;
 			}else{
 				
               num++;
           }
             oul[0].style.left = (-num * 500)+"px";
             ospan[num].className = "cur";
			 },1000);
			}
			show();
			for (var i = 0; i < ospan.length; i++) {
				ospan[i].index = i;
          ospan[i].onmouseover = function(){
          	clearInterval(fun);
          	for(j=0;j<ospan.length;j++){
             ospan[j].className = "";
          	}
          	num = this.index;
          	this.className = "cur";
          	 oul[0].style.left = (-this.index * 500)+"px";
             }
              ospan[i].onmouseout = function(){
            show ();
            } 
          } 
		}
	</script>
</head>
<body>
	<div id="box">
      <ul>
      	<li><img src="imagine/1.jpg" width="500"></li>
      	<li><img src="imagine/2.jpg" width="500"></li>
      	<li><img src="imagine/3.jpg" width="500"></li>
      	<li><img src="imagine/4.jpg" width="500"></li>
      </ul>
      <p>
      	<span class="cur">1</span>
      	<span>2</span>
      	<span>3</span>
      	<span>4</span>
      </p>
	</div>
</body>
</html>